---
type: integration
title: '@astrojs/react'
description:  "@astrojs/reactを使用してAstroのコンポーネントサポートを拡張する方法"
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/react/'
category: renderer
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

この **[Astroインテグレーション][astro-integration]** は[React](https://react.dev/)コンポーネントのサーバーサイドレンダリング（SSR）とクライアントサイドのハイドレーションを可能にします。

## インストール

Astroには、公式インテグレーションのセットアップを自動化するための`astro add`コマンドがあります。これを使用しない場合は、代わりにインテグレーションの[手動インストール](#手動でのインストール)も可能です。

`@astrojs/react`をインストールするには、下のコマンドをプロジェクトのディレクトリから実行し、プロンプトに従ってください。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npx astro add react
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm astro add react
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn astro add react
  ```
  </Fragment>
</PackageManagerTabs>

問題に遭遇した場合、[気軽にGithubで発生した問題についてお知らせください](https://github.com/withastro/astro/issues)。あるいは、以下の手動インストールも試してみてください。

### 手動でのインストール

最初に`@astrojs/react`パッケージをインストールします。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install @astrojs/react
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add @astrojs/react
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add @astrojs/react
  ```
  </Fragment>
</PackageManagerTabs>

ほとんどのパッケージマネージャーはpeer dependenciesも一緒にインストールするようになっています。もし "Cannot find package 'react'"（や似たような警告）がAstroをスタートした時に表示された場合、以下の方法で`react`と`react-dom`をインストールする必要があります。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install react react-dom
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add react react-dom
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add react react-dom
  ```
  </Fragment>
</PackageManagerTabs>

これらのステップが完了したら、`astro.config.*`の`integrations`プロパティからインテグレーションを有効化する必要があります。

```js ins="react()" ins={2} title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  // ...
  integrations: [react()],
});
```

## スターターガイド
AstroでReactコンポーネントを使用する方法を詳しく知るには、[UIフレームワークドキュメント][astro-ui-frameworks]をご一読ください。ドキュメントからは、

* 📦 どうコンポーネントがロードされるか
* 💧 クライアントサイドのハイドレーションオプション
* 🤝 複数のフレームワークを合わせて使う方法

について学ぶことが出来ます。
## オプション

### 複数のJSXフレームワークを一緒に使用する

（React、Preact、Solidなどの）複数のJSXフレームワークを同一のプロジェクトで使用している場合、 それぞれのコンポーネントに対してどのJSXフレームワークの変換方法を使用するか、Astroが判断する必要があります。JSXフレームワークを一つのみ導入している場合は特別な設定を記述する必要はありません。

`include`（必須）と`exclude`（任意）オプションを使用して、どのコンポーネントがどのフレームワークを使用するのか設定して下さい。設定では、特定のフレームワークのためのファイルまたはフォルダーを含んだ配列を`include`に含めて下さい。この時複数のファイルパスを含めるためにワイルドカードも使用できます。

Astroは同じフレームワークを使用するコンポーネントをまとめたフォルダー（`/components/react`や`/components/solid`など）を、使用しているフレームワークにつき一つずつ作成することを推奨していますが、必須ではありません。

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';

export default defineConfig({
  // Astroが複数のフレームワークを同時使用することが以下のコードで可能になります。
  // JSXフレームワークを一つだけ使用している場合は`include`を含める必要はありません。
  integrations: [
    preact({
      include: ['**/preact/*'],
    }),
    react({
      include: ['**/react/*'],
    }),
    solid({
      include: ['**/solid/*'],
    }),
  ],
});
```

### 子要素のパース
AstroコンポーネントからReactコンポーネントへ渡される子要素は、Reactノードではなくプレーンな文字列としてパースされます。

例えば、下の`<ReactComponent />`には子要素が一つしか渡されませません。

```astro
---
import ReactComponent from './ReactComponent';
---

<ReactComponent>
  <div>one</div>
  <div>two</div>
</ReactComponent>
```

異なる場所に異なる要素を挿入する機能などのために、1つ以上の子要素が渡される事を*想定*しているライブラリを使用している場合、この機能が邪魔になるかも知れません。 

この場合、実験的な`experimentalReactChildren`フラグにより、子要素をReactにvnodeとして必ず渡すようAstroに伝えられます。ランタイム上のコストはありますが、互換性の確保に役立ちます。

このオプションは、Reactインテグレーションの設定から有効に出来ます。

```js title="astro.config.mjs" ins={8}
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  // ...
  integrations: [
    react({
      experimentalReactChildren: true,
    }),
  ],
});
```

[astro-integration]: /ja/guides/integrations-guide/

[astro-ui-frameworks]: /ja/guides/framework-components/#フレームワークコンポーネントを利用
